<head>
    <script src="../build/index.js"></script>
    <script src="../build/plugin.webgl.js"></script>
    <script src="../build/plugin.webgl.3ds.js"></script>
</head>

<style>
    body {
        margin: 0;
    }
    canvas {
        background-color: #4caf50;
    }
</style>

<body>
    <canvas id="app" width="600" height="600"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'), {
            webgl: true,
            fullScreen: true,
        }).start();

        var texture2img = {
            'Material #45': $app.imgLoader('../resource/game_char/4.jpg'),
            'Material #46': $app.imgLoader('../resource/game_char/3.jpg'),
            'Material #49': $app.imgLoader('../resource/game_char/6.jpg'),
            'Material #51': $app.imgLoader('../resource/game_char/8.jpg'),
        };

        Easycanvas.loader3ds('../resource/game_char/sunnvfashi.3DS', function (data) {

            var woman = $app.add({
                name: 'woman',
                style: {
                    left: 200,
                    top: 350,
                },
                webgl: {
                    rx: 90, ry: 0, rz: Easycanvas.Transition.linear(0, 360, 5000).loop(),
                },
            });

            data.forEach(function (model) {
                woman.add({
                    name: model.img || '辅助图层',
                    webgl: window.Easycanvas.webglShapes.custom({
                        vertices: model.vertices,
                        indices: model.indices,
                        img: texture2img[model.img],
                        textures: model.textures,
                        rx: function () {
                            return this.$parent.webgl.rx;
                        },
                        ry: function () {
                            return this.$parent.webgl.ry;
                        },
                        rz: function () {
                            return this.$parent.webgl.rz();
                        },
                        scale: Easycanvas.Transition.pendulum(40, 60, 3000).loop(),
                        colors2: [
                            Math.random() * 255,
                            Math.random() * 255,
                            Math.random() * 255,
                            // Math.random() * 255,
                        ],
                    })
                });
            });
        });

        $app.imgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png', function (img) {
            // create a Sprite
            window.Sprite1 = $app.add({
                name: 'letter_G',
                content: {
                    img: img,
                },
                style: {
                    width: 200, height: 200,
                    cutLeft: 0, cutTop: 0, // source position, default 0
                    left: Easycanvas.Transition.pendulum(300, 400, 2500).loop(),
                    top: 300,
                    opacity: 1,
                    rotate: 20,
                    locate: 'center', // default center
                    zIndex: 2, // z-index of this image
                },
                dragable: true,
            });
        });
    </script>
</body>

